.container-whz {
  height: 100vh;
  width: 100%;
  background-color: white;
  overflow-x: hidden;
  /* 隐藏水平滚动条 */

  .top-whz {
    display: flex;
    justify-content: center;
    font-size: 30rpx;
    background-color: #FF644D;
    height: 260rpx;
    overflow: hidden;
    /* 确保内容不会溢出 */

    /* 让子元素对齐到父元素底部 */
    .hot-whz {
      display: flex;
      justify-content: center;
      align-items: baseline;
      height: 100rpx;
      width: 200rpx;
      // background-color: aqua;
      margin-bottom: 30rpx;
      background-size: contain;
      background-position: center;
      background-repeat: no-repeat;
      align-self: flex-end;
    }
  }

  .hotmain-whz {
    height: 100vh;
    width: 100%;
    background-color: white;
    border-radius: 30rpx 30rpx 0 0;
    margin-top: -20rpx;
    padding: 5rpx 20rpx;
    box-sizing: border-box;
    /* 包含内边距和边框在内的宽高计算 */

    .hotItems-whz {
      display: flex;
      align-items: center;
      background: linear-gradient(to right, #fdd7cd, #fdfdfd);
      /* 渐变背景颜色 */
      margin-top: 10rpx;
      padding-left: 20rpx;
      padding-top: 20rpx;
      padding-bottom: 20rpx;
      padding-right: 0rpx;
      // padding: 20rpx;
      border-radius: 15rpx;
      color: rgb(0, 0, 0);
      font-size: 24rpx;
      font-weight: bold;
      box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
      // box-sizing: border-box; /* 包含内边距和边框在内的宽高计算 */
      // width: 100%; /* 确保每个热搜项目的宽度不会超过父容器 */

      .icon {
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: rgba(104, 80, 80, 0.2);
        /* 半透明背景 */
        width: 50rpx;
        height: 50rpx;
        border-radius: 50%;
        margin-right: 20rpx;
        font-size: 24rpx;
      }

      .content {
        max-width: calc(100% - 250rpx); /* 考虑到图标的宽度和间距 */
        flex-grow: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: rgb(0, 0, 0);
        transition: color 0.1s;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        /* 添加颜色过渡效果 */
      }

      .hotright-whz{
        margin-left: 20rpx;
        margin-right: 0rpx;
        // background-color: aqua;
        display: flex;
        align-items: center;
        height: 50rpx;
        justify-content: center;
        font-size: 20rpx;
        margin-left: auto;
        .imageShow-whz{
          width: 40rpx;
          height: 40rpx;
          background-size: contain;
          background-position: center;
          background-repeat: no-repeat;
          // background-color: red;
        }
      }
      .content.read {
        color: rgb(141, 141, 141);
      }

      .content.readBili {
        color: rgb(141, 141, 141);
      }

      .content.readCsdn {
        color: rgb(141, 141, 141);
      }
      .content.readToutiao {
        color: rgb(141, 141, 141);
      }

      &:nth-child(1) .icon,
      &:nth-child(2) .icon,
      &:nth-child(3) .icon {
        background-color: #fcbf4e;
      }
      &:nth-child(4) .icon,
      &:nth-child(5) .icon,
      &:nth-child(6) .icon {
        background-color: #ffda96;
      }
    }
  }
}